<template>
  <div id="app">
    <div class="container">
      <div class="header">
        <b-img :src="'http://www.szccpx.com/images/banner.jpg'" class="head-img" />
      </div>
      <div>
        <b-navbar toggleable="lg" type="dark" variant="info">
          <b-navbar-toggle target="nav-collapse" />
          <b-collapse id="nav-collapse" is-nav>
            <b-navbar-nav v-for="(nav,idx) in navs" :key="idx">
              <b-nav-item
                v-if="!nav.subNavigator || nav.subNavigator.length === 0"
                :href="'#/'+nav.linkType+'?id='+nav.link"
                :to="{ path: nav.linkType, query: { id: nav.link } }"
              >{{ nav.name }}</b-nav-item>
              <b-nav-item-dropdown v-else :text="nav.name">
                <b-dropdown-item
                  v-for="(sub, index) in nav.subNavigator"
                  :key="index"
                  :to="{ path: sub.linkType, query: { id: sub.link } }"
                >{{ sub.name }}</b-dropdown-item>
              </b-nav-item-dropdown>
            </b-navbar-nav>
            <!-- Right aligned nav items -->
          </b-collapse>
        </b-navbar>
      </div>
      <div>
        <b-carousel
          id="carousel-1"
          :interval="4000"
          controls
          indicators
          background="#ababab"
          img-width="1024"
          img-height="100"
          style="text-shadow: 1px 1px 2px #333;"
        >
          <!-- Text slides with image -->
          <b-carousel-slide
            v-for="(banner, idx) in banners"
            :key="idx"
            :img-src="banner.value"
          />
        </b-carousel>
      </div>
      <main style="margin-top: 10px">
        <router-view />
      </main>
      <div class="footer">
        <div v-for="(item, idx) in footers" :key="idx">
          {{ item.value }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import { getTabelList } from '@/api/home-page/navs'

import { getByCode } from '@/api/basicConfig/index'

export default {
  name: 'App',
  components: {
  },
  data() {
    return {
      navs: [],
      footers: [],
      banners: []
    }
  },
  created() {
    this.getNavs()
    getByCode({
      classifyCode: 'footer'
    }).then(res => {
      this.footers = res.data.basicItems
    })
    getByCode({
      classifyCode: 'banner'
    }).then(res => {
      this.banners = res.data.basicItems
    })
  },
  methods: {
    getNavs() {
      getTabelList({
        page: 0,
        size: 10,
        status: 'up'
      }).then(resp => {
        const { data } = resp
        const { content } = data
        this.navs = content
      })
    }
  }
}
</script>

<style>
  #app {
    width: 1024px;
    margin: 0 auto;
  }
  .container {
    width: 1000px;
    margin: 0 auto;
  }

  .footer {
    text-align: center;
    margin-top: 10px;
  }
</style>
